<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.row {
				margin: 20px 0px;
			}
			
			.btn {
				width: 100%;
			}
			
			.showImg {
				position: absolute;
				top: 100px;
				right: 40px;
				width: 600px;
				height: 400px;
			}
			
			.imgspace {
				width: 100%;
				height: 350px;
			}
			
			.files {
				display: none;
			}
			
			.imgs {
				position: relative;
				width: 130px;
				height: 130px;
				margin: 10px;
				border: 1px dotted cadetblue;
				overflow: hidden;
			}
			
			.imgs>img {
				position: absolute;
				height: 100%;
			}
		</style>
		<script type="text/javascript">
		//如果没有登陆，则跳转到登陆界面
			if(!$.cookie("userSession")) {
				alert("请登陆")
				location.href = "my_register.html";
			}
		</script>
	</head>

	<body>
		<div class="container">
			<h2>请录入车辆信息</h2>
			<div class="row">
				<div class="col-md-5 col-md-offset-1 ">
					<div class="input-group">
						<div class="input-group-addon">品牌</div>
						<input type="text" name="pingpai" class="form-control" id="pingpai">
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-5 col-md-offset-1 ">
					<div class="input-group">
						<div class="input-group-addon">车系</div>
						<input type="text" name="chexi" class="form-control" id="chexi">
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-5 col-md-offset-1 ">
					<div class="input-group">
						<div class="input-group-addon">价格</div>
						<input type="text" name="price" class="form-control" id="price">
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-5 col-md-offset-1 ">
					<div class="input-group">
						<div class="input-group-addon">车型</div>
						<input type="text" name="chexing" class="form-control" id="chexing">
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-5 col-md-offset-1 ">
					<div class="input-group">
						<div class="input-group-addon">车龄</div>
						<input type="text" name="carAge" class="form-control" id="carAge">
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-5 col-md-offset-1 ">
					<div class="input-group">
						<div class="input-group-addon">里程</div>
						<input type="text" name="distance" class="form-control" id="distance">
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-5 col-md-offset-1 ">
					<div class="input-group">
						<div class="input-group-addon">排量/变速箱</div>
						<input type="text" name="pailiang" class="form-control" id="pailiang">
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-5 col-md-offset-1 ">
					<div class="input-group">
						<div class="input-group-addon">颜色</div>
						<input type="text" name="color" class="form-control" id="color">
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-5 col-md-offset-1 ">
					<div class="input-group">
						<div class="input-group-addon">看车地址</div>
						<input type="text" name="color" class="form-control" id="kanchedizhi">
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-5 col-md-offset-1 ">
					<div class="input-group">
						<div class="input-group-addon">排放标准</div>
						<input type="text" name="color" class="form-control" id="PaifangRule">
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-5 col-md-offset-1 ">
					<div class="input-group">
						<div class="input-group-addon">上架时间</div>
						<input type="text" name="color" class="form-control" id="shangjiaTime">
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-5 col-md-offset-1 ">
					<div class="input-group">
						<div class="input-group-addon">上牌时间</div>
						<input type="text" name="color" class="form-control" id="shangpaiTime">
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-5 col-md-offset-1 ">
					<input id="inputbtn" class="btn btn-danger" type="button" value="提交信息">
				</div>
			</div>
			<div class="showImg">
				<div class="row">
					<div class="col-md-3">
						<input style="display: none;" class="files" type="file" name="" id="file1" onchange="choseFile(this,0)" value="上传图片一" />
						<a class="btn btn-danger" href="javascript:document.getElementById('file1').click();">外观图片</a>
					</div>
					<div class="col-md-3">
						<input style="display: none;" class="files" type="file" name="" id="file2" onchange="choseFile(this,1)" value="上传图片二" />
						<a class="btn btn-danger" href="javascript:document.getElementById('file2').click();">内饰图片</a>
					</div>
					<div class="col-md-3">
						<input style="display: none;" class="files" type="file" name="" id="file3" onchange="choseFile(this,2)" value="上传图片三" />
						<a class="btn btn-danger" href="javascript:document.getElementById('file3').click();">结构或发动机</a>
					</div>
					<div class="col-md-3">
						<input style="display: none;" class="files" type="file" name="" id="file4" onchange="choseFile(this,3)" value="上传图片四" />
						<a class="btn btn-danger" href="javascript:document.getElementById('file4').click();">细节图片</a>
					</div>
				</div>
				<div class="imgspace row">
					<div class="col-md-3 imgs" id="img0">
					</div>
					<div class="col-md-3 imgs" id="img1">
					</div>
					<div class="col-md-3 imgs" id="img2">
					</div>
					<div class="col-md-3 imgs" id="img3">
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
		//图片数组
			var arrStr = [];
			function choseFile(source, id) {
				var file = source.files[0];
				if(window.FileReader) {
					if(source.files.length > 0) {
						var fr = new FileReader();
						fr.onloadend = function(e) {
							var img = document.createElement("img");
							img.src = e.target.result;
							$("#img" + id).html("");
							$("#img" + id)[0].appendChild(img);
							arrStr[id] = (e.target.result);
							$(".imgs>img").each(function() {
								var widthImg = $(this).width();
								$(this)[0].style.left = "-" + (widthImg - 130) / 2 + "px";
							});
						};
						fr.readAsDataURL(file);
					}
				} else {
					console.log("浏览器不支持")
				}
			}
			//		错误码JSON文件解析
			var errocode;
			var userId;
			$(function() {
				$.getJSON("json/errocode.json", function(data) {
					errocode = data;
				});
				if($.cookie("userSession")) {
					$.ajax({
						type: "get",
						url: "https://api.leancloud.cn/1.1/users/me",
						async: true,
						headers: {
							"X-LC-Id": "9keh2YX5j8hpDc0YR2REhv0q-gzGzoHsz",
							"X-LC-Key": "rrdO8OEJACH5qna3m3FzhpYf",
							"X-LC-Session": $.cookie("userSession")
						},
						success: function(data) {
							userId = data.objectId;
						},
						error: function(e) {
							var code = JSON.parse(e.responseText).code;
							console.log(code);
							for(var i in errocode) {
								if(errocode[i].code == code) {
									console.log(errocode[i].content)
								}
							}
						}
					});
				}
			});
			$("#inputbtn").on("click", function() {
				if(arrStr.length < 4) {
					alert("请上传您的爱车照片");
					return;
				}
				//读取信息
				function getInfo() {
					var infoObject = new Object;
					infoObject.chexi = $("#chexi").val();
					infoObject.pingpai = $("#pingpai").val();
					infoObject.price = $("#price").val();
					infoObject.chexing = $("#chexing").val();
					infoObject.carAge = $("#carAge").val();
					infoObject.distance = $("#distance").val();
					infoObject.pailiang = $("#pailiang").val();
					infoObject.color = $("#color").val();
					infoObject.shangjiaTime = $("#shangjiaTime").val();
					infoObject.shangpaiTime = $("#shangpaiTime").val();
					infoObject.PaifangRule = $("#PaifangRule").val();
					infoObject.kanchedizhi = $("#kanchedizhi").val();
					infoObject.imgs = arrStr;
					var jsons = JSON.stringify(infoObject);
					return jsons;
				};
				console.log($.cookie("userSession"));
				console.log(getInfo());
				var info = getInfo();
				$.ajax({
					type: "post",
					url: "https://api.leancloud.cn/1.1/classes/car",
					async: true,
					headers: {
						"X-LC-Id": "9keh2YX5j8hpDc0YR2REhv0q-gzGzoHsz",
						"X-LC-Key": "rrdO8OEJACH5qna3m3FzhpYf",
						"Content-Type": "application/json"
					},
					data: info,
					success: function(data) {
						console.log(data);
						addRelations(data.objectId);
						location.href = "productdetail.html";
					},
					error: function(e) {
						var code = JSON.parse(e.responseText).code;
						console.log(code);
						for(var i in errocode) {
							if(errocode[i].code == code) {
								console.log(errocode[i].content)
							}
						}
					}
				});
				//创建一个关联，将此车关联到当前这个用户
				function addRelations(carObjectId) {
					$.ajax({
						type: "put",
						url: "https://api.leancloud.cn/1.1/users/" + userId,
						async: true,
						headers: {
							"X-LC-Id": "9keh2YX5j8hpDc0YR2REhv0q-gzGzoHsz",
							"X-LC-Key": "rrdO8OEJACH5qna3m3FzhpYf",
							"X-LC-Session": $.cookie("userSession"),
							"Content-Type": "application/json"
						},
						data: secOutKey(carObjectId),
						success: function(data) {
							console.log(data);
						},
						error: function(e) {
							var code = JSON.parse(e.responseText).code;
							console.log(code);
							for(var i in errocode) {
								if(errocode[i].code == code) {
									console.log(errocode[i].content)
								}
							}
						}
					});
				}

				function secOutKey(carObjectId) {
					var sessionObject = new Object;
					sessionObject.ownerCar = {
						"__type": "Pointer",
						"className": "car",
						"objectId": carObjectId
					}
					var jsons = JSON.stringify(sessionObject);
					return jsons;
				}
			});
		</script>
	</body>

</html>